<!--添加修改角色信息-->
<template>
    <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="500"
             :title="title ? '资料新增' : '资料编辑'"
             :maskClosable="false"
             :destroyOnClose="true">
        <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
            <a-form-item label="资料名称：" prop="textbookName" v-bind="formStyle">
                <a-input
                        placeholder="请输入资料名称" ref="re"
                        v-decorator="[
                        'textbookName',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
                />
            </a-form-item>
          <a-form-item label="上传资料：" class="handFile" v-bind="formStyle"  style="position: relative" required :extra="errorMsg">
            <a-input v-model="bookFileName" read-only style="width: 180px; float: left"
                     disabled :maxlength="100" placeholder="请选择文件" />
            <a href="javascript:void(0);" style="background-color: #35bbd4 ;color: #ffffff">
              <input ref="bookFile" type="file" name="bookFile"
                     :accept="accept"
                     @change="onChangeFile($event,'bookFile')"
                     required />选择文件
            </a>
          </a-form-item>
        </a-form>
        <div slot="footer">
            <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
            <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
        </div>

    </a-modal>
</template>

<script>
    import verify from 'libs/verify'
    import AFormItem from 'ant-design-vue/es/form/FormItem'
    import {validateID} from "@/libs/validate";
    export default {
        name: 'addEdit',
        components: {
            AFormItem,
        },
        data () {
            return {
                verify,
                form: this.$form.createForm(this),
                showAddTable: false,
                input: false,
              title:true,
              errorMsg: '',
              accept:'.doc,.docx,.pdf,.mp4,.zip,.rar',
              bookFile:'',
              bookFileName:'',
              scheduleObj:{}
            }
        },
        computed: {
            formStyle() {
                return this.$store.state.common.formStyle
            }
        },
        props: {
          objDTO:{
            type: Object,
            required: true
          }
        },
        watch: {

        },
        methods: {
          validateID,



          /**
           * 选择文件
           */
          onChangeFile (e, name) {
            let _this = this;
            _this.bookFile = e.target.files[0];
            _this.bookFileName = e.target.files[0].name;
            _this.errorMsg = '';
            let indexDot = _this.bookFileName.lastIndexOf('.');
            if (_this.accept.indexOf(_this.bookFileName.substr(indexDot + 1, 3).toLowerCase()) <=0) {
              _this.errorMsg = '请上传doc、docx、pdf、mp4、zip、rar文件';
              _this.bookFile = '';
              _this.bookFileName = ''
                return
            }
            let size = e.target.files[0].size
              let msize = 100*1024*1024
            if(size > msize){
                _this.errorMsg = '请上传不大于100M的文件';
                _this.bookFile = '';
                _this.bookFileName = ''
            }
          },
            /**
             * Function    : saveApply
             * Description : 打开弹框
             * Input       : none
             * Return      : none
             */
            showModal (courseId) {
                this.showAddTable = true
              this.title = true
                this.courseId = courseId
            },
            /**
             * Function    : showEdit
             * Description : 编辑时显示
             * Input       : opt单个所有数据
             * Return      : none
             */
            showEdit ( opt ) {
              this.title = false
                this.showAddTable = true
                this.id = opt.id
                this.courseId = opt.courseId
                this.$nextTick (() => {
                    this.form.setFieldsValue (this.$pick (opt, [ 'textbookName' ]))
                })
            },

            /**
             * Function    : saveApply
             * Description : 角色信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( ) {
              let _this = this;
                this.form.validateFields((err, value) => {
                    if (!err) {
                      let formData = new FormData ()
                      let url = 'lab/course/textbook/save'
                      if(!this.title){
                        formData.append ('id', this.id)
                      }
                      _this.loading = true
                      formData.append ('courseId', this.courseId)
                      formData.append ('textbookName', value.textbookName)
                      formData.append ('bookFile', _this.bookFile)
                      _this.$uploadPost (url, formData).then (response => {
                        this.showAddTable = false
                        if (response.code === 0) {
                          this.$emit('init')
                          this.$message.success(response.message)
                          this.cancelApply()
                        } else {
                          this.$message.error(response.message)
                        }
                        _this.bookFile = '';
                        _this.bookFileName = ''
                        this.$parent.spinning = false
                      })
                    }
                })
            },

            /**
             * Function    : cancelApply
             * Description : 取消弹出框
             * Input       : val
             * Return      : none
             */
            cancelApply ( ) {
                this.showAddTable = false
                let _this = this
                setTimeout(function() {
                    _this.form.resetFields()
                }, 100)
            },


        },

        created () {

        }
    }
</script>
